<!--
 * @Descripttion:日期范围查询选择 
 * @version: 
 * @Author: hutao
 * @Date: 2021-12-30 16:11:03
 * @LastEditors: hutao
 * @LastEditTime: 2023-05-12 20:00:57
-->
<template>
  <el-date-picker
    :disabled="disabled"
    v-model="state.value"
    @change="onChange"
    style="width:100%;background:#fff"
    :default-time="defaultTime"
    :type="type"
    :format="format"
    :value-format="format"
    :picker-options="pickerOptions"
    :placeholder="placeholder"
  >
  </el-date-picker>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
interface State {
  /** 数据状态 */
  loading: boolean;
  value?: string;
}
@Component
export default class Index extends Vue {
  @Prop() value!: string;
  /** 是否禁用 */
  @Prop({ default: false }) disabled?: boolean;
  /* 是否只读 */
  @Prop({ default: false }) readonly?: boolean;
  @Prop() defaultTime?: string;
  @Prop({ default: '请选择日期' }) placeholder?: string;
  @Prop({ default: 'date' }) type?: string;
  @Prop() pickerOptions?: any;
  /** 数据 */
  /** 数据 */
  state: State = {
    loading: false,
    value: undefined,
  };
  /** 生命周期 */
  created() {
    this.state.value = this.value;
  }
  /** 生命周期 */
  /** 方法 */
  resetValue(val: any) {
    this.state.value = val;
  }
  onChange(e: string | undefined | null) {
    this.$emit('input', this.state.value);
    this.$emit('change', e);
  }
  /** 监听 */
  /** 监听 */
  @Watch('value')
  onValue(val: string) {
    this.state.value = val;
  }
  /** 计算属性 */
  get format() {
    if (this.type === 'date') {
      return 'yyyy-MM-dd';
    } else {
      return 'yyyy-MM-dd HH:mm:ss';
    }
  }
}
</script>
<style lang="scss" scoped></style>
